1.1 This section addresses the editing rules for External Knowledge Base articles and covers strictly the CSS (console) part.
1.2 If unsure about a particular way of editing a word or sentence, please look it up in similar articles and compare the CSS code - alternatively, ask Dimitris or Peter!
1.3 Important: when editing the EKB, it's crucial that all wording and editing is consistent - this is not as strict for the IKB
1.4 Note: you will see this syntax used quite a bit - wysiwyg - it's the short version of What You See Is What You Get
1.5 Note: The code console can be accessed by clicking this button:
2.1 Titles: there are two type of titles that are used in the EKB
Note: All titles in the EKB are bolded. (see how to do that in section Text variations)
2.2 Paragraphs: there is one type of paragraph that is used in the EKB
2.3 Lists: the EKB mostly uses unorganized lists - organized lists are very rare, but described below:
Example:
Example:
2.4 Text variations: text comes in bold, italic, green and other types that can be paired within a paragraph
This is text
This is text
This is text
White text (sort of as a 'hidden' screen text, best we can do) has been added to the CSS 16/05/2022
"wysiwyg-color-white"
2.5 Links: there is only one type of links used
2.6 Breaks: this block is normally used when the paragraph settings produce too little or too much spacing between two different blocks
Example of code: <p>Do not install Lumion in the same folder as an older version<br>User another folder!</p>
Example of display: first example as if the two sentences are in separate paragraphs and second when using <be>. You will notice a difference when copy and pasting the text in Zendesk or other text editors.
Do not install Lumion in the same folder as an older version
User another folder!
Do not install Lumion in the same folder as an older version
User another folder!
2.7 Indents: different levels of indentation can be used in the EKB.
This is the paragraph
This is the paragraph
This is the paragraph
2.8 Tables: on certain occasions, editing tables will be required. This is a bit more complex, but the basic rules are as follows:
- first, determine the outlines of the table:
<table style="height: 200px;" border="1" width="auto" cellpadding="5">
- Each table row is defined with a <tr> tag. Each table data/cell is defined with a <td> tag. Each table header is defined with a <th> tag.
- By default, the text in <td> elements are regular and left-aligned. By default, the text in <th> elements are bold and centered.
- second, define where the body begins:
<tbody>
- third, add the information from left to right for each row:
<tr>
<td style="width: 85px;">Language</td>
<td style="width: 85px;">Water</td>
<td style="width: 85px;">Glass</td>
</tr>
<tr>
<td style="width: 85px;">Chinese</td>
<td style="width: 85px;">水</td>
<td style="width: 85px;">玻璃</td>
</tr>
- lastly, close the block that comprise the table:
</tbody>
</table>
- Results:
| Language | Water | Glass |
| Chinese | 水 | 玻璃 |
2.9 Quoting:
This is a quote
I added a breakI started a new paragraph and ended the quote
2.10 Heading Referencing:
Some articles are very long and referencing headings is necessary to navigate them. If an article has, for example, 10 sub-sections that do not need to be read in that exact order, oftentimes we can reference the heading to the text so the user can simply click it as a link and the page will scroll down/up automatically to the chosen heading. This requires the creation of a heading ID for which you require 2 elements: the 'link that redirects' and the heading.
Example:
At the top of the article, there is a section named 1. General information. Clicking the link below will scroll up automatically:
1. General information - link example
To achieve this, you need to:
- select the text that you want to redirect you to the heading:
- press Ctrl+K and select the 'Heading' tab:
- select the appropriate heading (that already exists in the article) from the list:
- click Link:
Important: As a Zendesk Admin, the row to which you are redirected will be obscured by the ZD ribbon:
If editing the IKB, simply reference one or two rows above the target heading. If editing the EKB, please let it as it is since users can see the whole content properly.
2.11 Borders for Images:
In most cases, we need a border around images, especially if there is a white background to separate from the text.
However for some things like logos, no border is needed. Use the class="Image_BorderOff"
for example:
<p>
<img class="Image_BorderOff" src="https://kb.lumion.com/hc/article_attachments/4407392002834/Impact.png" alt="Impact.png">
</p>
2.12: No borders for Table:
use new class: class="table-invisible"
example: <table class="table-invisible" style="border-collapse: collapse; width: 100%;">